<template>
  <div class="viewer-container" id="viewerContainer"></div>
</template>

<script setup lang='ts'>
import { onMounted } from 'vue'
  import * as Cesium from "cesium"
  import data from '@/assets/china/data1.json'
onMounted(() => {
    // 设置默认视角在中国
    Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90);
    const viewer = new Cesium.Viewer("viewerContainer", {
        info: false,
        geocoder: false, // 一种地理位置搜索工具，用于显示相机访问的地理位置。默认使用微软的Bing地图。
        homeButton: true, // 首页位置，点击之后将视图跳转到默认视角。
        sceneModePicker: false, // 切换2D、3D 和 Columbus View (CV) 模式。
        // baseLayerPicker: false, // 选择三维数字地球的底图（imagery and terrain）。
        navigationHelpButton: false, // 帮助提示，如何操作数字地球。
        animation: true, // 控制视窗动画的播放速度。
        creditsDisplay: false, //展示商标版权和数据源。
        // creditContainer: "credit",
        timeline: true, // 展示当前时间和允许用户在进度条上拖动到任何一个指定的时间。
        fullscreenButton: false, //视察全屏按钮,
        vrButton: false, // 右下角vr按钮
        // terrainProvider: Cesium.createWorldTerrain(), //地形
        // // terrain: Cesium.Terrain.fromWorldTerrain(),
        // imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
        //   // url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
        //   url:"",
        // })
     })
     viewer._cesiumWidget._creditContainer.style.display = "none"//取消版权信息
     viewer.scene.globe.enableLighting = true;//启用以太阳为光源的地球
     let datasource = viewer.dataSources.add(Cesium.GeoJsonDataSource.load(data));
    //  viewer.flyTo(datasource, {
    //   offset: new Cesium.HeadingPitchRange(0, -90, 0), // 调整偏移量
    //   maximumHeight: 10000000 // 限制最大高度
    //  });
//      viewer.zoomTo(datasource);
//      datasource.then(function() {
//     // 数据加载完成后，设置回你想要的视角
//     viewer.camera.setView({
//         destination: Cesium.Rectangle.fromDegrees(90, -20, 110, 90)
//     });
// });
})
</script>


<style scoped>
.viewer-container{
  width: 100%;
  height: 100vh; 
  padding: 0;
  margin: 0;
  overflow:
  hidden;

}
</style>
